import React from 'react'
import {
  Paper,
  Card,
  CardText,
  CardHeader,
  CardActions,
  RaisedButton,
  TextField,
} from 'material-ui'
import io from 'socket.io-client'
import './styles.css'
// import * as utils from '../../util/utils'

import { topicSchema } from '../../util/variable-define'

const socket = io('http://localhost:3302')

const createTopic = (data) => {
  return Object.assign({}, topicSchema, data)
}

class TopicCreate extends React.Component {
  constructor() {
    super()
    this.state = {
      topic: createTopic({
        title: '标题',
        description: '描述',
        content: '内容',
      })
    }
  }
  handleChange = (type, event) => {
    let topic = this.state.topic;
    topic[type] = event.target.value
    this.setState({
      topic,
    })
  }
  submit = () => {
    this.createTopic(this.state.topic)
  }
  createTopic = (topic) => {
    socket.emit('createTopic', topic)
  }
  render() {
    return (
      <Paper>
        <div>
          <RaisedButton
            label="返回"
            href="/topic"
            primary={true}
          />
        </div>
        <Card>
          <CardHeader
            title="写新文章"
          />
          <CardText>
            <TextField
              id="title"
              floatingLabelText="标题"
              fullWidth={true}
              value={this.state.topic.title}
              onChange={this.handleChange.bind(this, 'title')}
            />
            <TextField
              id="description"
              floatingLabelText="描述"
              fullWidth={true}
              value={this.state.topic.description}
              onChange={this.handleChange.bind(this, 'description')}
            />
            <TextField
              id="content"
              floatingLabelText="内容"
              fullWidth={true}
              value={this.state.topic.content}
              onChange={this.handleChange.bind(this, 'content')}
            />
          </CardText>
          <CardActions>
            <RaisedButton
              label="发布"
              secondary={true}
              onClick={this.submit}
            />
          </CardActions>
        </Card>
      </Paper>
    )
  }
}

export default TopicCreate
